<template>
  <treeselect v-model="v" :options="deptOptions" :show-count="true" placeholder="请选择" :style="{width: width}"/>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import {deptTreeSelect} from "@/api/system/user";

export default {
  name: "deptSelect",
  components: {Treeselect},
  model: {
    prop: "value",
    event: "update"
  },
  props: {
    value: String,
    width: {
      type: String,
      default: "200px"
    }
  },
  data() {
    return {
      deptOptions: undefined
    }
  },
  computed: {
    v: {
      get() {
        return this.value
      },
      set(newV) {
        this.$emit('update', newV)
      },
    },
  },
  watch: {
    v: {
      immediate: true,
      handler() {
        this.loadDepts()
      },
    }
  },
  methods: {
    loadDepts() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
  }
}
</script>

<style scoped>

</style>
